<template>
    <view class="content">
        <view class="box">
            <view class="title">客户信息</view>
            <!-- 编辑 -->
            <!-- <view class="box-down" v-if="isEdit">
                <view v-for="(item, index) in khList" :key="index" v-if="khList && khList.length > 0">
                    <view class="info">
                        <view class="info-name u-flex u-flex-1">
                            <view>客户姓名：</view>
                            <view class="u-flex-1">{{item.name}}</view>
                        </view>
                        <image src="../../static/icon/del.png" class="del-icon" @click="delName(index)"></image>
                    </view>
                    <view class="info">
                        <view>客户关系：</view>
                        <view class="u-flex-1">{{item.khgx}}</view>
                    </view>
                    <view class="info">
                        <view>手机号：</view>
                        <view class="u-flex-1">{{item.tel}}</view>
                    </view>
                </view>
                <view class="ke-inp">
                    <view class="ke-inp-item">
                        <view>客户姓名</view>
                        <input type="text" v-model="name" placeholder="请输入客户姓名" placeholder-class="p-inp" class="inp">
                    </view>
                    <view class="ke-inp-item">
                        <view>客户关系</view>
                        <input type="text" v-model="khgx" placeholder="请输入客户关系" placeholder-class="p-inp" class="inp">
                    </view>
                    <view class="ke-inp-item">
                        <view>手机号</view>
                        <input type="number" v-model="tel" placeholder="请输入手机号" placeholder-class="p-inp" class="inp">
                    </view>
                </view>
                <view class="u-flex u-row-right">
                    <image src="../../static/image/add.png" class="add-icon" @click="addName"></image>
                </view>
            </view> -->
            
            <!-- 添加 -->
            <view class="box-down">
                <view class="info info-name">
                    报备信息
                </view>
                <view class="info">
                    <view>报备姓名：</view>
                    <view class="u-flex-1">{{data.name}}</view>
                </view>
                <view class="info">
                    <view>报备电话：</view>
                    <view class="u-flex-1">{{data.phone}}</view>
                </view>
                
                <view class="info info-name border-t u-p-t-20 u-m-t-20">
                    认购信息
                </view>
                <view class="ke-inp">
                    <view class="ke-inp-item">
                        <view>认购姓名</view>
                        <input type="text" v-model="name" class="inp" placeholder="请输入认购姓名" :disabled="disabled">
                    </view>
                    <view class="ke-inp-item">
                        <view>认购电话</view>
                        <input type="number" v-model="tel" class="inp" placeholder="请输入认购电话" :disabled="disabled">
                    </view>
                </view>
                <view class="tip">
                    <image src="../../static/icon/tip.png" class="tip-icon"></image>
                    <view>提示：如报备信息和认购信息不是同一个人，请修改报备信息</view>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">楼盘信息</view>
            <view class="box-cen">
                <view class="ke-inp-item">
                    <view>房间号</view>
                    <view class="u-flex">
                        <input type="text" v-model="roomNo" placeholder="请输入 栋/单元/室" placeholder-class="p-inp" class="inp" :disabled="disabled">
                        <!-- <input type="text" class="f-inp">栋
                        <input type="text" class="f-inp">单元
                        <input type="text" class="f-inp">室 -->
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>建筑面积</view>
                    <input type="text" v-model="area" placeholder="请输入建筑面积" placeholder-class="p-inp" class="inp" :disabled="disabled">㎡
                </view>
                <view class="ke-inp-item">
                    <view>户型</view>
                    <view class="u-flex" @click="show_1 = true">
                        <input type="text" v-model="houseType" placeholder="请选择户型" placeholder-class="p-inp" class="inp" :disabled="disabled">
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>项目类型</view>
                    <view class="u-flex" @click="show_2 = true">
                        <input type="text" v-model="project" placeholder="请选择项目类型" placeholder-class="p-inp" class="inp" :disabled="disabled">
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">认购信息</view>
            <view class="box-cen">
                <view class="ke-inp-item" @click="KStimeShow = true">
                    <view>认购日期</view>
                    <input type="text" v-model="time" placeholder="请输入认购日期" placeholder-class="p-inp" class="inp" disabled>
                </view>
                <view class="ke-inp-item">
                    <view>总价（元）</view>
                    <input type="digit" v-model="price" placeholder="请输入总价金额" placeholder-class="p-inp" class="inp" :disabled="disabled">
                </view>
                <view class="ke-inp-item">
                    <view>佣金（{{ data.commission_type == 2 ? '%' : '元' }}）</view>
                    <input type="text" v-model="data.commission" class="inp" disabled>
                </view>
                <view class="ke-inp-item" v-if="data.project_name">
                    <view>项目总监</view>
                    <input type="text" v-model="data.project_name" class="inp" disabled>
                </view>
                <view class="ke-inp-item" v-if="data.project_phone">
                    <view>联系电话</view>
                    <input type="text" v-model="data.project_phone" class="inp" disabled>
                </view>
                <view class="ke-inp-item" v-if="data.resident_name">
                    <view>项目驻场</view>
                    <input type="text" v-model="data.resident_name" class="inp" disabled>
                </view>
                <view class="ke-inp-item" v-if="data.resident_phone">
                    <view>联系电话</view>
                    <input type="text" v-model="data.resident_phone" class="inp" disabled>
                </view>
                <view class="ke-inp-item" v-if="data.manager_name">
                    <view>运维经理</view>
                    <input type="text" v-model="data.manager_name" class="inp" disabled>
                </view>
                <view class="ke-inp-item" v-if="data.manager_phone">
                    <view>联系电话</view>
                    <input type="text" v-model="data.manager_phone" class="inp" disabled>
                </view>
                <view class="remark">
                    <view>备注</view>
                    <textarea v-model="content" placeholder="请输入备注" placeholder-class="p-inp" :disabled="disabled"></textarea>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">认购附件</view>
            <view class="img-box">
                <image :src="fjImg || '../../static/image/up_photo.png'" class="up-photo" @click="chooseImg"></image>
            </view>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(doSubmit)">提交</view>
        
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime"></u-picker>
        
        <!-- 户型 -->
        <u-select v-model="show_1" mode="single-column" :list="screen.house_type" value-name="id" label-name="name" @confirm="confirmMore($event, 1)"></u-select>
        <!-- 项目类型 -->
        <u-select v-model="show_2" mode="single-column" :list="screen.project" value-name="id" label-name="name" @confirm="confirmMore($event, 2)"></u-select>
    </view>
</template>

<script>
    import { API_URL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                noClick:true,//连点
                URL: API_URL, //上传图片用的
                fjImg: '',//成交附件
                fjImgId: '',
                urls: '',
                name: '',
                tel: '',
                roomNo: '',//房间号
                area: '',//面积
                show_1: false,//户型
                show_2: false,//项目类型
                houseType: '',//户型
                houseTypeId: '',
                project: '',//项目类型
                projectId: '',
                time: '',//认购日期
                price: '',//总价
                content: '',//备注
                KStimeShow: false, //开盘时间
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                // name: '',
                // khgx: '',
                // tel: '',
                // khList: [],
                disabled: false,
                id: '',
                data: {},
                // isEdit: false,
                screen: {},
            };
        },
        onLoad(option) {
            if (option.isEdit) {
                // this.isEdit = true
                uni.setNavigationBarTitle({
                	title:'编辑认购信息'
                })
            }
            this.id = option.id
            this.getData()
            this.getScreen()
            
        },
        methods: {
            
            doSubmit() {
                if (!this.name) {
                    this.$toast('请输入认购姓名');
                    return
                }
                if (!this.tel) {
                    this.$toast('请输入认购电话');
                    return
                }
                if (!this.$checkPhone(this.tel)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                if (!this.roomNo) {
                    this.$toast('请输入房间号');
                    return
                }
                if (!this.area) {
                    this.$toast('请输入建筑面积');
                    return
                }
                if (!this.houseTypeId) {
                    this.$toast('请选择户型');
                    return
                }
                if (!this.projectId) {
                    this.$toast('请选择项目类型');
                    return
                }
                if (!this.time) {
                    this.$toast('请选择认购日期');
                    return
                }
                if (!this.price) {
                    this.$toast('请输入总价');
                    return
                }
                if (!this.fjImgId) {
                    this.$toast('请上传认购照片');
                    return
                }
                
                this.$ajax('enter_subscribe_for', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//报备id
                    buy_name: this.name,//姓名
                    buy_phone: this.tel,//电话
                    room_no: this.roomNo,//房间号
                    area: this.area,//面积
                    buy_date: this.time,//认购日期
                    all_price: this.price,//总价
                    buy_remark: this.content,//备注
                    annex_img_ids: this.fjImgId,//附件
                    project_type_id: this.projectId,
                    house_type_id: this.houseTypeId,
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.$cTo('/pages/kehu/subscribe-list?id=' + this.id)
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            //选择时间
            chooseTime(e) {
            	this.time = e.year + '-' + e.month + '-' + e.day;
            },
            
            confirmMore(e, num) {
                console.log(e)
                if (num == 1) {
                    this.houseType = e[0].label
                    this.houseTypeId = e[0].value
                } else if (num == 2) {
                    this.project = e[0].label
                    this.projectId = e[0].value
                }
            },
            
            // 获取详情
            getData() {
                this.$ajax('reporting_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//报备id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                        if (this.data.enter_examine == 3) {
                            if (ret.detail && ret.detail.annex_img && ret.detail.annex_img[0]) {
                                this.fjImg = ret.detail.annex_img[0].image//成交附件
                                this.fjImgId = ret.detail.annex_img[0].id
                            }
                            this.name = ret.detail.name
                            this.tel = ret.detail.phone
                            this.roomNo = ret.detail.room_no//房间号
                            this.area = ret.detail.area//面积
                            this.time = ret.detail.buy_date//认购日期
                            this.price = ret.detail.all_price//总价
                            this.content = ret.detail.buy_remark//备注
                            
                            // this.houseType = ret.detail.house_type
                            // this.houseTypeId = ret.detail.
                            // this.project = ret.detail.project_type
                            // this.projectId = ret.detail.
                        }
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 获取筛选项
            getScreen() {
                this.$ajax('properties_screen', {
                    // user_token: this.$getSync('userToken'),
                    // type: 1,//1筛选加不限
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.screen = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 上传图片
            chooseImg() {
                var _this = this
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        console.log('res',res)
                        _this.urls = res.tempFilePaths[0]
                        _this.uploadImg()
                    }
                });
            },
            // 上传
            uploadImg() {
                let _this = this
                uni.uploadFile({
                    url: _this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
                    filePath: _this.urls,
                    name: 'image',
                    formData:{module: 'api'},
                    success: result => {
                        console.log(result)
                        let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
                        _this.fjImg = data.image
                        _this.fjImgId = data.image_id
                    },
                    fail: err => {
                        console.log('err', err)
                    }
                });
            },
            
            // 添加客户信息
            // addName() {
            //     this.khList.push({
            //         name: this.name,
            //         khgx: this.khgx,
            //         tel: this.tel,
            //     })
            //     this.name = ''
            //     this.khgx = ''
            //     this.tel = ''
            // },
            // delName(index) {
            //     this.khList.splice(index, 1)
            // },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        margin-bottom: 20rpx;
        border-radius: 20rpx;
    }
    .title{
        background-color: #effaff;
        padding: 30rpx 25rpx;
        border-radius: 20rpx 20rpx 0 0;
        color: #00a1e9;
    }
    .border-t{
        border-top: 2rpx solid #e6e6e6;
    }
    .box-down{
        padding: 30rpx 20rpx;
    }
    .box-cen{
        padding: 0 20rpx;
    }
    .info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .info-name{
        font-size: 32rpx;
        font-weight: bold;
    }
    .del-icon{
        width: 25rpx;
        height: 26rpx;
        margin-left: 10rpx;
    }
    .ke-inp{
        background-color: #fafafa;
        padding: 0 20rpx;
    }
    .tip{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24rpx;
        color: #45474c;
        padding-top: 20rpx;
    }
    .tip-icon{
        width: 25rpx;
        height: 25rpx;
        margin-right: 10rpx;
    }
    .ke-inp-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .ke-inp-item:last-child{
        border-bottom: none;
    }
    .p-inp{
        color: #acacac;
    }
    .inp{
        width: 470rpx;
        height: 100rpx;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .f-inp{
        width: 110rpx;
        height: 70rpx;
        background-color: #fafafa;
        text-align: center;
        margin: 20rpx 10rpx;
    }
    .add-icon{
        width: 152rpx;
        height: 56rpx;
        margin-top: 15rpx;
    }
    .remark{
        padding: 30rpx 0;
        // border-top: 2rpx solid #e6e6e6;
    }
    textarea{
        width: 100%;
        padding: 20rpx;
        background-color: #fafafa;
        margin-top: 15rpx;
    }
    .img-box{
        padding: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 168rpx;
        height: 168rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    
    
</style>
